<template>
  <div>
    <div>
      <span>{{ $t("message.TrussDesign.paramsInput.stringerType") }}</span>
      <el-select v-model="params.Selected">
        <el-option
            v-for="item in params.Types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div>
      <el-image style="width: 260px;height: 245px;display: block;margin-top: 10px;border: 1px darkgray solid"
                :src="url"
                fit="fill">
      </el-image>
      <div style="margin-top: 10px;">
        <span style="font-weight: bolder;font-size: 14px">{{ $t("message.TrussDesign.paramsInput.stringerTip") }}</span>
        <div style="margin-top: 10px;">
          <span class="paramJoint">{{ $t("message.TrussDesign.paramsInput.fit.direction") }}</span>
          <div class="side" @click="switchDirection(0)"
               :style="params.outward0?{backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
            <img :src="side1Url" style="width: 24px;height: 24px;" :title=side1>
          </div>
          <div class="side" style="margin-left: 30px" @click="switchDirection(1)"
               :style="params.outward1?{backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
            <img :src="side2Url" style="width: 24px;height: 24px" :title=side2>
          </div>
        </div>
      </div>
      <div style="margin-top: 10px;">
        <div v-if="params.Selected === 'typeT'">
          <div>
            <span class="paramName">B:</span>
            <el-input type="number" class="input" v-model="params.typeT.B"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">H:</span>
            <el-input type="number" class="input" v-model="params.typeT.H"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S:</span>
            <el-input type="number" class="input" v-model="params.typeT.S"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S1:</span>
            <el-input type="number" class="input" v-model="params.typeT.S1"></el-input>
            mm
          </div>
        </div>
        <div v-else-if="params.Selected === 'typeG'">
          <div>
            <span class="paramName">B:</span>
            <el-input type="number" class="input" v-model="params.typeG.B"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">H:</span>
            <el-input type="number" class="input" v-model="params.typeG.H"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S:</span>
            <el-input type="number" class="input" v-model="params.typeG.S"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S1:</span>
            <el-input type="number" class="input" v-model="params.typeG.S1"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S2:</span>
            <el-input type="number" class="input" v-model="params.typeG.S2"></el-input>
            mm
          </div>
        </div>
        <div v-else-if="params.Selected === 'typeZ'">
          <div>
            <span class="paramJoint">{{ $t("message.TrussDesign.paramsInput.orientation.desc") }}</span>
            <div class="side" @click="()=> this.params.typeZ.direction = 0"
                 :style="params.typeZ.direction === 0 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="leftZUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation1>
            </div>
            <div class="side" @click="()=> this.params.typeZ.direction = 1" style="margin-left: 30px"
                 :style="params.typeZ.direction !== 0 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="rightZUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation2>
            </div>
          </div>
          <div>
            <span class="paramName">B:</span>
            <el-input type="number" class="input" v-model="params.typeZ.B"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">b:</span>
            <el-input type="number" class="input" v-model="params.typeZ.b"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">H:</span>
            <el-input type="number" class="input" v-model="params.typeZ.H"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S:</span>
            <el-input type="number" class="input" v-model="params.typeZ.S"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S1:</span>
            <el-input type="number" class="input" v-model="params.typeZ.S1"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S2:</span>
            <el-input type="number" class="input" v-model="params.typeZ.S2"></el-input>
            mm
          </div>
        </div>
        <div v-else-if="params.Selected === 'typeC'">
          <div>
            <span class="paramJoint">{{ $t("message.TrussDesign.paramsInput.orientation.desc") }}</span>
            <div class="side" @click="()=> this.params.typeC.direction = 0"
                 :style="params.typeC.direction === 0 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="leftCUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation1>
            </div>
            <div class="side" @click="()=> this.params.typeC.direction = 1" style="margin-left: 30px"
                 :style="params.typeC.direction === 1 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="rightCUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation2>
            </div>
            <div class="side" @click="()=> this.params.typeC.direction = 2" style="margin-left: 30px"
                 :style="params.typeC.direction === 2 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="upCUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation3>
            </div>
          </div>
          <div>
            <span class="paramName">B:</span>
            <el-input type="number" class="input" v-model="params.typeC.B"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">H:</span>
            <el-input type="number" class="input" v-model="params.typeC.H"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">h:</span>
            <el-input type="number" class="input" v-model="params.typeC.h"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S:</span>
            <el-input type="number" class="input" v-model="params.typeC.S"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S1:</span>
            <el-input type="number" class="input" v-model="params.typeC.S1"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S2:</span>
            <el-input type="number" class="input" v-model="params.typeC.S2"></el-input>
            mm
          </div>
        </div>
        <div v-else-if="params.Selected === 'typeVL'">
          <div>
            <span class="paramJoint">{{ $t("message.TrussDesign.paramsInput.orientation.desc") }}</span>
            <div class="side" @click="()=> this.params.typeL.direction = 0"
                 :style="params.typeL.direction === 0 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="leftLUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation1>
            </div>
            <div class="side" @click="()=> this.params.typeL.direction = 1" style="margin-left: 30px"
                 :style="params.typeL.direction !== 0 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="rightLUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation2>
            </div>
          </div>
          <div>
            <span class="paramName">B:</span>
            <el-input type="number" class="input" v-model="params.typeL.B"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">H:</span>
            <el-input type="number" class="input" v-model="params.typeL.H"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S:</span>
            <el-input type="number" class="input" v-model="params.typeL.S"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S1:</span>
            <el-input type="number" class="input" v-model="params.typeL.S1"></el-input>
            mm
          </div>
        </div>
        <div v-else-if="params.Selected === 'typeLL' || params.Selected === 'typeSL'">
          <div>
            <span class="paramJoint">{{ $t("message.TrussDesign.paramsInput.orientation.desc") }}</span>
            <div class="side" @click="()=> this.params.typeL.direction = 0"
                 :style="params.typeL.direction === 0 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="leftSLLUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation1>
            </div>
            <div class="side" @click="()=> this.params.typeL.direction = 1" style="margin-left: 30px"
                 :style="params.typeL.direction !== 0 ? {backgroundColor:'#C0C0C0'}:{backgroundColor: '#EDEDED'}">
              <img :src="rightSLLUrl" style="width: 21px;height: 21px;margin-top: 2px" :title=orientation2>
            </div>
          </div>
          <div>
            <span class="paramName">B:</span>
            <el-input type="number" class="input" v-model="params.typeL.B"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">H:</span>
            <el-input type="number" class="input" v-model="params.typeL.H"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S:</span>
            <el-input type="number" class="input" v-model="params.typeL.S"></el-input>
            mm
          </div>
          <!--          <div>-->
          <!--            <span class="paramName">S1:</span>-->
          <!--            <el-input type="number" class="input" v-model="params.typeL.S1"></el-input>-->
          <!--            mm-->
          <!--          </div>-->
          <div>
            <span class="paramName">x:</span>
            <el-input type="number" class="input" v-model="params.typeL.x"></el-input>
            °
          </div>
        </div>
        <div v-else-if="params.Selected === 'typeJ'">
          <div>
            <span class="paramName">B:</span>
            <el-input type="number" class="input" v-model="params.typeJ.B"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">H:</span>
            <el-input type="number" class="input" v-model="params.typeJ.H"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">S:</span>
            <el-input type="number" class="input" v-model="params.typeJ.S"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">b:</span>
            <el-input type="number" class="input" v-model="params.typeJ.b"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">b1:</span>
            <el-input type="number" class="input" v-model="params.typeJ.b1"></el-input>
            mm
          </div>
          <div>
            <span class="paramName">b2:</span>
            <el-input type="number" class="input" v-model="params.typeJ.b2"></el-input>
            mm
          </div>
        </div>
        <div v-else>
          {{ this.params.Selected }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getCommonPic} from "../../../js/util/GetCommonPic";
import trussDesignCommand from "../TrussDesignCommand";

export default {
  name: "StringersParams",
  data() {
    return {
      params: {
        typeT: {
          B: 50,
          H: 50,
          S1: 15,
          S: 15,
        },
        typeG: {
          B: 50,
          H: 50,
          S1: 15,
          S2: 15,
          S: 15,
        },
        typeZ: {
          B: 30,
          b: 30,
          H: 50,
          S1: 5,
          S2: 5,
          S: 5,
          direction: 0
        },
        typeC: {
          B: 50,
          H: 50,
          h: 30,
          S1: 10,
          S2: 10,
          S: 10,
          direction: 0
        },
        typeL: {
          B: 50,
          H: 50,
          S1: 5,
          S: 5,
          x: 0,
          direction: 0
        },
        typeJ: {
          B: 50,
          H: 50,
          b: 20,
          b1: 10,
          b2: 10,
          S: 5,
        },
        outward: 0,
        outward0: true,
        outward1: false,
        Selected: "typeT",
        Types: [{
          value: "typeT",
          label: this.$t("message.TrussDesign.trussTypes.typeT.desc")
        }, {
          value: "typeG",
          label: this.$t("message.TrussDesign.trussTypes.typeG.desc")
        }, {
          value: "typeZ",
          label: this.$t("message.TrussDesign.trussTypes.typeZ.desc")
        }, {
          value: "typeC",
          label: this.$t("message.TrussDesign.trussTypes.typeC.desc")
        }, {
          value: "typeVL",
          label: this.$t("message.TrussDesign.trussTypes.typeVL.desc")
        }, {
          value: "typeSL",
          label: this.$t("message.TrussDesign.trussTypes.typeSL.desc")
        }, {
          value: "typeLL",
          label: this.$t("message.TrussDesign.trussTypes.typeLL.desc")
        }, {
          value: "typeJ",
          label: this.$t("message.TrussDesign.trussTypes.typeJ.desc")
        }]
      }
    }
  },
  mounted() {
    if (trussDesignCommand.from === 1) {
      this.params = trussDesignCommand.sizeParam;
      trussDesignCommand.from = 0;
    }
  },
  computed: {
    url() {
      return getCommonPic(this.params.Selected + ".png", "stringersSketch");
    },
    leftLUrl() {
      return getCommonPic("L01.png", "stringersSketch");
    },
    rightLUrl() {
      return getCommonPic("L02.png", "stringersSketch");
    },
    leftZUrl() {
      return getCommonPic("Z01.png", "stringersSketch");
    },
    rightZUrl() {
      return getCommonPic("Z02.png", "stringersSketch");
    },
    leftCUrl() {
      return getCommonPic("C01.png", "stringersSketch");
    },
    rightCUrl() {
      return getCommonPic("C02.png", "stringersSketch");
    },
    upCUrl() {
      return getCommonPic("C03.png", "stringersSketch");
    },
    leftSLLUrl() {
      if (this.params.Selected === "typeLL") {
        return getCommonPic("LL01.png", "stringersSketch");
      } else {
        return getCommonPic("SL01.png", "stringersSketch");
      }
    },
    rightSLLUrl() {
      if (this.params.Selected === "typeLL") {
        return getCommonPic("LL02.png", "stringersSketch");
      } else {
        return getCommonPic("SL02.png", "stringersSketch");
      }
    },
    side1Url() {
      return getCommonPic("side1.svg", "stringersSketch");
    },
    side2Url() {
      return getCommonPic("side2.svg", "stringersSketch");
    },
    side1() {
      return this.$t("message.TrussDesign.paramsInput.fit.side1");
    },
    side2() {
      return this.$t("message.TrussDesign.paramsInput.fit.side2");
    },
    orientation1() {
      return this.$t("message.TrussDesign.paramsInput.orientation.o1");
    },
    orientation2() {
      return this.$t("message.TrussDesign.paramsInput.orientation.o2");
    },
    orientation3() {
      return this.$t("message.TrussDesign.paramsInput.orientation.o3");
    },
  },
  watch: {
    'params.Selected': function (v1, v2) {
      if (v1 === "typeSL") {
        this.params.typeL.x = 45;
      }
      if (v1 === "typeLL") {
        this.params.typeL.x = 135;
      }
    }
  },
  methods: {
    switchDirection(type) {
      if (type === 0) {
        this.params.outward0 = true;
        this.params.outward1 = false;
      } else {
        this.params.outward0 = false;
        this.params.outward1 = true;
      }
      this.params.outward = type;
    }
  }
}
</script>
<style scoped>
.paramName {
  width: 24px;
  display: inline-block;
}

.paramJoint {
  width: 70px;
  display: inline-block;
}

.input {
  width: 150px;
  margin-left: 1px;
}

.side {
  display: inline-block;
  background-color: #EDEDED;
  height: 25px;
  width: 28px;
  text-align: center;
  cursor: pointer;
}
</style>